<template>
  <div class="silde_box">
    <slide-verify
        ref="block"
        :slider-text="text"
        :accuracy="accuracy"
        :imgs="imgList"
        @again="onAgain"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
    ></slide-verify>
    <button class="btn" @click="handleClick">在父组件可以点我刷新哦</button>
    <div>{{ msg }}</div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import type {SlideVerifyInstance} from 'vue3-slide-verify';
import SlideVerify from 'vue3-slide-verify';
import 'vue3-slide-verify/dist/style.css';

const msg = ref<string>('');
const block = ref<SlideVerifyInstance | null>(null);
const imgList = ref<string[]>([
  '/image/1.jpg',
  '/image/2.jpg',
  '/image/3.jpg'
])
const onAgain = () => {
  msg.value = '检测到非人为操作的哦！ try again';
  block.value?.refresh();
};

const onSuccess = (times: number) => {
  msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
};

const onFail = () => {
  msg.value = '验证不通过';
};

const onRefresh = () => {
  msg.value = '点击了刷新小图标';
};

const handleClick = () => {
  block.value?.refresh();
  msg.value = '';
};

const text = '向右滑动->';
const accuracy = 1;
</script>

<style scoped>
.silde_box {
  margin: 0 auto;
}
</style>
